<template>
  <div>
    <div class="main-box" > 
        <div :class="[(index+1)%2==1?'border':'']" v-for="(item,index) in musics" :key="item.id" @click="handleIndex(item.id)" :data-index="index" >
            <ItemBox :data="item"></ItemBox>
        </div>
      
    </div>
  </div>
</template>

<script>
import ItemBox from "./components/ItemBox";
export default {
  name: "Music",
  components: {
    ItemBox
  },
  mounted() {
    this.axios.get("/top/playlist").then(res => {
      this.musics = res.data.playlists;
      console.log(this.musics);
    });
  },
  data() {
    return {
      musics: []
    };
  },
  methods: {
    handleIndex(id) {
      console.log(id);
      this.$router.push(`/detail?id=${id}`)
    }
  }
};
</script>

<style scoped> 
.main-box {
  width: 10rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.border {
  border: 5px solid red;
}
</style>